<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分项管理 - 生活状态评分系统</title>
    <link href="/static/bootstrap.min.css" rel="stylesheet">
    <link href="/static/custom.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/">生活状态评分系统</a>
            <div class="navbar-nav">
                <a class="nav-link" href="/judge">评分页面</a>
                <a class="nav-link" href="/create">评分项创建</a>
                <a class="nav-link active" href="/manage">评分项管理</a>
                <a class="nav-link" href="/history">历史评分</a>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>评分项管理</h2>
            <div>
                <a href="/create" class="btn btn-primary me-2">创建评分项</a>
                <button class="btn btn-success me-2" onclick="updateSelectedStatus(true)">启用选中项</button>
                <button class="btn btn-warning me-2" onclick="updateSelectedStatus(false)">禁用评分项</button>
                <button class="btn btn-danger" onclick="deleteSelected()">删除选中项</button>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" class="form-check-input" id="selectAll" onchange="toggleSelectAll()">
                        </th>
                        <th>项目名称</th>
                        <th>类型</th>
                        <th>选项</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>
                            <input type="checkbox" class="form-check-input item-checkbox" value="{{ item.id }}">
                        </td>
                        <td>{{ item.item_name }}</td>
                        <td>{{ '勾选项' if item.is_checkbox else '选项评分' }}</td>
                        <td>
                            {% if item.is_checkbox %}
                                是/否
                            {% else %}
                                {% for option, score in zip_items(item.options, item.scores) %}
                                    {{ option }}({{ score }}分){% if not loop.last %}, {% endif %}
                                {% endfor %}
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge {{ 'bg-success' if item.enabled else 'bg-danger' }}">
                                {{ '启用' if item.enabled else '禁用' }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <script src="/static/bootstrap.bundle.min.js"></script>
    <script src="/static/custom.js"></script>
    <script>
        function toggleSelectAll() {
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.getElementsByClassName('item-checkbox');
            for (let checkbox of checkboxes) {
                checkbox.checked = selectAll.checked;
            }
        }

        function getSelectedIds() {
            const checkboxes = document.getElementsByClassName('item-checkbox');
            const selectedIds = [];
            for (let checkbox of checkboxes) {
                if (checkbox.checked) {
                    selectedIds.push(parseInt(checkbox.value));
                }
            }
            return selectedIds;
        }

        async function updateSelectedStatus(enabled) {
            const selectedIds = getSelectedIds();
            if (selectedIds.length === 0) {
                alert('请选择要操作的评分项');
                return;
            }

            if (!confirm(`确定要${enabled ? '启用' : '禁用'}选中的评分项吗？`)) {
                return;
            }

            try {
                const response = await fetch('/api/items/status', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        item_ids: selectedIds,
                        enabled: enabled
                    })
                });

                const result = await response.json();
                
                if (response.ok) {
                    alert('操作成功');
                    window.location.reload();
                } else {
                    alert('操作失败：' + result.error);
                }
            } catch (error) {
                alert('操作失败：' + error.message);
            }
        }

        async function deleteSelected() {
            const selectedIds = getSelectedIds();
            if (selectedIds.length === 0) {
                alert('请选择要删除的评分项');
                return;
            }

            if (!confirm('确定要删除选中的评分项吗？此操作不可恢复！')) {
                return;
            }

            try {
                const response = await fetch('/api/items/delete', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        item_ids: selectedIds
                    })
                });

                const result = await response.json();
                
                if (response.ok) {
                    alert('删除成功');
                    window.location.reload();
                } else {
                    alert('删除失败：' + result.error);
                }
            } catch (error) {
                alert('删除失败：' + error.message);
            }
        }
    </script>
</body>
</html> 